<template>
	<!-- 头部 -->
	<div id="header" v-if="close == 'false' || !close">
		<div class="choice">
			<div class="icons flex">
				<div class="fontJF" @mouseover="isMouse = 1" @mouseout="isMouse = -1">
					<div class="flex fontHover typeface">
						<span>{{ font == 1 ? '简体' : '繁体' }}</span>
						<span class="iconfont icon-a-arrowdown fontDown" :class="isMouse == 1 && 'trsf'"></span>
					</div>
					<div class="seleteFont" v-show="isMouse == 1" @mouseover="isMouse = 1" @mouseout="isMouse = -1">
						<p @click="isSwitch(1)" class="fontp" :class="font == 1 && 'isFont'">简体</p>
						<p @click="isSwitch(2)" class="fontp" :class="font == 2 && 'isFont'">繁体</p>
					</div>
				</div>
				<div class="iconz">
					<span class="iconfont icon-search isHover" @click="searchDel"></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: ['closeWZA', 'imgUrl'],
	data() {
		return {
			font: 1,
			isMouse: -1,
			wordList: [],
			close: false,
			userSpace: -1,
			isUserCenter: false,
			merberInfo: null,
		};
	},
	watch: {
		closeWZA: {
			handler(newVal, oldVal) {
				if (newVal != oldVal) {
					this.close = newVal;
				}
			},
			immediate: true
		},
	},
	created() {
		
	},
	mounted() {
		this.close = localStorage.close;
		
		if(localStorage.userInfo) {
			this.merberInfo = JSON.parse(localStorage.userInfo)
		}
		if(this.close=='true'){
			this.show();
		}
		this.$nextTick(() => {
			this.isSwitch(localStorage.getItem('typeface') || 1);
		});
		this.isUserCenter = window.location.href.includes('userSpace')
	},
	methods: {
		isSwitch(val) {
			this.font = val;
			localStorage.setItem('typeface', val);
			if (localStorage.getItem('typeface') && localStorage.getItem('typeface') == '1') {
				zh_tran('s');
			} else if (localStorage.getItem('typeface') && localStorage.getItem('typeface') == '2') {
				zh_tran('t');
			} else {
				zh_tran('s');
			}
		},
		searchDel() {
			this.$emit('searchDel', true);
		},
		show() {
			//显示无障碍
			localStorage.setItem('close', true);
			this.close = true;
			this.$emit('closeChange',this.close );
			wuzhangai();
		},
	},
};
</script>

<style>
#header {
	width: 100%;
	height: 40px;
	background: #333333;
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

#header .choice .fontJF {
	height: 100%;
	line-height: 40px;
}
#header .choice {
	width: 1200px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	font-size: 14px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #bbbbbb;
}
#header .choice .fontDown {
	margin-left: 4px;
	font-size: 18px;
}

#header .choice .trsf {
	transform: rotate(180deg);
}
#header .choice .seleteFont {
	/* display: none; */
	position: absolute;
	top: 40px;
	width: 92px;
	height: 80px;
	background: #ffffff;
	box-shadow: 0px 6px 45px 0px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 102;
	cursor: pointer;
}
#header .choice .seleteFont .fontp {
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	background: #f8f8f8;
	color: #333;
	cursor: pointer;
}
#header .choice .seleteFont .isFont {
	height: 40px;
	line-height: 40px;
	background: #fff !important;
	color: #ff3333 !important;
}
#header .choice .login {
	margin-right: 8px;
}
#header .choice .isHover:hover {
	color: #ffffff;
	cursor: pointer;
}
#header .choice .register {
	margin-left: 8px;
}
#header .choice .iconz .iconfont {
	font-size: 20px;
	margin-left: 16px;
}
#header .fontHover:hover {
	color: #fff;
}
#header .userHeadImg {
	margin-right: 8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
}
#header .fontp2{
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	background: #fff;
	color: #333;
	cursor: pointer;
}
#header .fontp2:hover {
	background-color: #f8f8f8;
}
#header .userCenter {
  color: #ff3333;
	background-color: #f8f8f8;
}
</style>
